React Native এর মৌলিক ধারণা

React Native হল একটি ফ্রেমওয়ার্ক যা JavaScript এবং React ব্যবহার করে মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। এটি মূলত একক কোডবেস থেকে iOS এবং Android প্ল্যাটফর্মের জন্য নেটিভ মোবাইল অ্যাপ্লিকেশন তৈরি করার সুবিধা প্রদান করে। React Native এর মূল উদ্দেশ্য হলো মোবাইল অ্যাপ ডেভেলপমেন্টে দ্রুততা, কার্যকারিতা এবং পারফরম্যান্স বৃদ্ধি করা, যা একাধিক প্ল্যাটফর্মের জন্য কোড পুনরায় লেখার ঝামেলা কমিয়ে দেয়।

React Native এর মৌলিক ধারণার উপাদান

১. JavaScript এবং React ব্যবহার

React Native, React লাইব্রেরির উপরে ভিত্তি করে তৈরি। React একটি UI লাইব্রেরি, যা JavaScript ভাষায় কাজ করে এবং components এর মাধ্যমে অ্যাপ্লিকেশনের UI তৈরি করতে সহায়তা করে। React Native তে আপনি React কম্পোনেন্ট ব্যবহার করে মোবাইল অ্যাপ তৈরি করেন, তবে এটি JavaScript কোডকে নেটিভ কোডে কনভার্ট করে।

২. কম্পোনেন্ট বেসড আর্কিটেকচার

React Native এর অ্যাপ্লিকেশনগুলি কম্পোনেন্ট বেসড আর্কিটেকচারে তৈরি হয়। প্রতিটি UI উপাদান একটি কম্পোনেন্ট হিসেবে কাজ করে। React Native তে View, Text, Image, TextInput ইত্যাদি নেটিভ কম্পোনেন্ট রয়েছে, যা মোবাইল অ্যাপ্লিকেশনের UI তৈরি করতে ব্যবহৃত হয়। প্রতিটি কম্পোনেন্ট একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারে এবং অ্যাপ্লিকেশনটির আউটপুট বা লেআউট প্রদর্শন করে।

৩. নেটিভ কোডে কনভার্ট করা

React Native-এ JavaScript কোডটি নেটিভ কোডে কনভার্ট হয়। এটি এমনভাবে কাজ করে যে, ডিভাইসের নেটিভ উপাদানগুলি (যেমন ক্যামেরা, GPS, পুশ নোটিফিকেশন) এবং UI উপাদানগুলি ব্যবহার করা যায়। এটি মোবাইল অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে এবং অ্যাপটি আরও দ্রুত এবং স্নিগ্ধভাবে চলে।

৪. একক কোডবেস দিয়ে একাধিক প্ল্যাটফর্ম

React Native-এ ডেভেলপাররা একটি কোডবেস ব্যবহার করে Android এবং iOS উভয় প্ল্যাটফর্মের জন্য অ্যাপ তৈরি করতে পারেন। এর ফলে, একই কোড একাধিক প্ল্যাটফর্মে কাজ করতে পারে, এবং ডেভেলপারদের জন্য কোড রিপিটিশন কমে যায়, যা সময় এবং খরচ সাশ্রয়ী।

৫. হট রিলোড (Hot Reload)

React Native তে হট রিলোড ফিচারটি থাকে, যার মাধ্যমে ডেভেলপাররা কোডে পরিবর্তন করার সাথে সাথে অ্যাপ্লিকেশনে তৎক্ষণাৎ সেই পরিবর্তন দেখতে পারেন। এই ফিচারটি ডেভেলপমেন্টের সময় কমিয়ে দেয় এবং দ্রুত ফলাফল পাওয়ার সুযোগ সৃষ্টি করে।

৬. React Native CLI এবং Expo

React Native-এ অ্যাপ তৈরি করার জন্য দুটি প্রধান টুলস ব্যবহার করা হয়:

• React Native CLI: এটি একটি কমান্ড লাইন ইন্টারফেস (CLI) টুল যা React Native অ্যাপ ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এটি আরো কাস্টমাইজড এবং উন্নত ফিচার সরবরাহ করে।
• Expo: Expo একটি টুলকিট যা React Native অ্যাপ তৈরি করা সহজ করে তোলে। এটি ডেভেলপারদের জন্য একটি ডেভেলপমেন্ট পরিবেশ প্রদান করে এবং নেটিভ কোড ছাড়াই অ্যাপ তৈরি করতে সহায়ক। এটি বিশেষভাবে নতুনদের জন্য উপকারী।

৭. স্টাইলিং এবং লেআউট

React Native-এ UI এবং লেআউট ডিজাইন করার জন্য JavaScript Object ব্যবহার করা হয়। আপনি flexbox এর মতো CSS বৈশিষ্ট্য ব্যবহার করে স্টাইলিং এবং লেআউট তৈরি করতে পারেন। তবে React Native এর স্টাইলিং CSS এর চেয়ে একটু ভিন্ন, যেখানে আপনাকে কম্পোনেন্টের জন্য স্টাইল অবজেক্ট তৈরি করতে হয়।

৮. নেটিভ ফিচার এবং API সমর্থন

React Native মোবাইল অ্যাপ্লিকেশনে বিভিন্ন নেটিভ ফিচার এবং API যেমন ক্যামেরা, লোकेশন সার্ভিস, ফিঙ্গারপ্রিন্ট, পুশ নোটিফিকেশন ইত্যাদি সমর্থন করে। এর মাধ্যমে আপনি নেটিভ অ্যাপ্লিকেশনগুলোর মতো উন্নত ফিচার যুক্ত করতে পারেন।

React Native এর মৌলিক ধারণার উপকারিতা

• ডেভেলপমেন্টের গতি বৃদ্ধি: একক কোডবেস দিয়ে একাধিক প্ল্যাটফর্মে অ্যাপ তৈরি করার সুবিধা ডেভেলপমেন্টের সময় অনেক কমিয়ে দেয়।
• নেটিভ পারফরম্যান্স: React Native নেটিভ কোডে কনভার্ট হওয়ার কারণে এটি মোবাইল ডিভাইসে আরও দ্রুত এবং কার্যকরী পারফরম্যান্স প্রদান করে।
• কোড পুনঃব্যবহারযোগ্যতা: React Native কোড পুনঃব্যবহারযোগ্য হওয়ার কারণে আপনি একবার লেখা কোড Android এবং iOS উভয় প্ল্যাটফর্মে ব্যবহার করতে পারবেন।
• উন্নত ইউজার এক্সপিরিয়েন্স (UX): React Native অ্যাপ্লিকেশনগুলি নেটিভ ইউআই কম্পোনেন্ট ব্যবহার করে, যা মোবাইল অ্যাপ্লিকেশনটির UX উন্নত করে।

সারাংশ

React Native একটি শক্তিশালী এবং কার্যকরী ফ্রেমওয়ার্ক যা JavaScript এবং React ব্যবহার করে মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও সহজ এবং দ্রুত করে তোলে। এর কম্পোনেন্ট বেসড আর্কিটেকচার, নেটিভ কোডে কনভার্ট হওয়া, এবং একক কোডবেসের মাধ্যমে একাধিক প্ল্যাটফর্মে অ্যাপ তৈরি করা এর মৌলিক ধারণা এবং মূল বৈশিষ্ট্য। React Native একটি উন্নত, পারফরম্যান্স-বান্ধব মোবাইল অ্যাপ ডেভেলপমেন্ট টুল হিসেবে ব্যবহারকারীদের জন্য অনেক সুবিধা নিয়ে আসে।

JSX (JavaScript XML) একটি সিনট্যাক্স এক্সটেনশন যা React-এর জন্য তৈরি করা হয়েছে। এটি JavaScript-এর মধ্যে HTML-like syntax ব্যবহারের মাধ্যমে UI (User Interface) তৈরি করতে ব্যবহৃত হয়। JSX আপনাকে HTML ট্যাগগুলির মতো কোড লিখতে দেয়, যা সহজেই React কম্পোনেন্টে রেন্ডার করা যায়। এটি মূলত JavaScript এবং HTML এর একটি মিশ্রণ এবং React এ ব্যবহার করা হয় UI কম্পোনেন্ট তৈরি করার জন্য।

JSX এর মূল বৈশিষ্ট্য

1. HTML-like Syntax
   JSX আপনাকে HTML এর মতো কোড লিখতে দেয়, যেমন <div>, <h1>, <button> ইত্যাদি, তবে এটি JavaScript এর মধ্যে ব্যবহৃত হয়।
2. React Elements তৈরি করা
   JSX React কম্পোনেন্টের মধ্যে UI উপাদানগুলি (elements) তৈরি করতে ব্যবহৃত হয়। JSX ব্যবহার করে React এর createElement মেথডের মাধ্যমে HTML এলিমেন্ট তৈরি করা হয়।
3. প্রকাশ্য কম্পোনেন্ট রেন্ডারিং
   JSX দ্বারা তৈরি কোডটি সরাসরি ব্রাউজারে HTML এ রূপান্তরিত হয় এবং তখন এটি ওয়েব পেজে প্রদর্শিত হয়।
4. JavaScript এক্সপ্রেশন সহ ব্যবহার
   JSX এ আপনি JavaScript এক্সপ্রেশন ব্যবহার করতে পারেন, যেমন ভেরিয়েবল, ফাংশন কল, অপারেটর ইত্যাদি, যেগুলি {} দিয়ে ঘেরা থাকে।

JSX কীভাবে কাজ করে?

JSX এর কাজের প্রক্রিয়া হলো, React যখন JSX কোড দেখতে পায়, তখন এটি স্বয়ংক্রিয়ভাবে JavaScript কোডে রূপান্তরিত করে। আসলে, JSX একটি সিনট্যাক্স শর্টকাট যা React.createElement() মেথডের জন্য একটি সহজ পাঠ্য তৈরি করে। যখন আপনি JSX ব্যবহার করেন, React এই JSX কে React.createElement() মেথডে কনভার্ট করে এবং এটি আপনাকে React Element প্রদান করে। তারপর এটি আপনার UI-তে উপস্থাপন করা হয়।

ধরা যাক, আপনি একটি React কম্পোনেন্ট তৈরি করছেন:

function MyComponent() {
  return <h1>Hello, World!</h1>;
}

এই JSX কোডটি আসলে পরবর্তী JavaScript কোডে রূপান্তরিত হয়:

function MyComponent() {
  return React.createElement('h1', null, 'Hello, World!');
}

এখানে:

• React.createElement() প্রথম আর্গুমেন্ট হিসেবে ট্যাগ ('h1'), দ্বিতীয় আর্গুমেন্ট হিসেবে প্রোপস (এখানে null), এবং তৃতীয় আর্গুমেন্ট হিসেবে উপাদান কনটেন্ট ('Hello, World!') গ্রহণ করে।

JSX এর বৈধতা এবং নিয়ম

1. একমাত্র একটি রুট এলিমেন্ট
   JSX-এর মধ্যে শুধুমাত্র একটিই রুট এলিমেন্ট থাকতে পারে। একাধিক এলিমেন্ট লিখতে চাইলে, তাদের একটি enclosing উপাদান (যেমন <div>, <section>, <React.Fragment>) এর মধ্যে রাখতে হবে।

   উদাহরণ:

   // ভুল
   return (
     <h1>Hello</h1>
     <p>Welcome</p>
   );
   
   // সঠিক
   return (
     <div>
       <h1>Hello</h1>
       <p>Welcome</p>
     </div>
   );

2. JSX-এ অ্যাট্রিবিউটের নাম CamelCase স্টাইলে থাকে
   HTML এর কিছু অ্যাট্রিবিউট যেমন class, for, onclick ইত্যাদি JSX-এ camelCase স্টাইলে লেখা হয়। উদাহরণস্বরূপ, class হয়ে যায় className, for হয়ে যায় htmlFor, এবং onclick হয়ে যায় onClick।

   উদাহরণ:

   <div className="container">Content</div>
   <label htmlFor="input-id">Label</label>

3. এক্সপ্রেশন ব্যবহার
   JSX-এ JavaScript এক্সপ্রেশন {} এর মধ্যে লেখা হয়। উদাহরণস্বরূপ, আপনি একটি ভেরিয়েবল বা ফাংশন কল {} এর মধ্যে রাখতে পারেন।

   উদাহরণ:

   const name = 'React';
   return <h1>Hello, {name}!</h1>;

JSX ব্যবহার করার সুবিধা

1. সহজ এবং পরিষ্কার কোড
   JSX ব্যবহার করে আপনি HTML-কে JavaScript এর মধ্যে সহজেই ইন্টিগ্রেট করতে পারেন, যা কোড লেখাকে সহজ এবং পরিষ্কার করে তোলে। HTML এবং JavaScript এর মধ্যে বিভেদ কাটাতে সাহায্য করে।
2. ডায়নামিক কনটেন্ট রেন্ডারিং
   JSX-এ আপনি JavaScript এক্সপ্রেশন ব্যবহার করতে পারেন, যা আপনাকে অ্যাপ্লিকেশনটির ডায়নামিক কনটেন্ট রেন্ডার করতে সহায়ক। আপনি ভেরিয়েবল, ফাংশন কল ইত্যাদি {} এর মধ্যে ব্যবহার করতে পারবেন।
3. React এ কোড লেখা সহজ করে
   React কম্পোনেন্টের মধ্যে UI তৈরি করতে JSX ব্যবহার করার মাধ্যমে ডেভেলপাররা আরও দ্রুত এবং সহজে অ্যাপ্লিকেশন ডেভেলপ করতে পারে। কারণ JSX স্বাভাবিক HTML এর মতোই দেখায় এবং React কম্পোনেন্টে রেন্ডার করা যায়।
4. ডিবাগিং এবং মেইন্টেন্যান্স সহজ
   JSX কোড HTML-এর মতো দেখতে হওয়ায় ডেভেলপারদের জন্য কোড পড়া এবং ডিবাগিং করা সহজ হয়ে যায়।

সারাংশ

JSX হল একটি JavaScript Syntax Extension যা React কম্পোনেন্ট তৈরি করতে সাহায্য করে। এটি JavaScript এর মধ্যে HTML-like syntax ব্যবহারের মাধ্যমে UI তৈরি করতে সহায়ক। JSX ব্যবহার করলে React এর মাধ্যমে অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও সহজ, পরিষ্কার এবং ডায়নামিক হয়ে ওঠে। React নিজে JSX কোডটিকে স্বয়ংক্রিয়ভাবে JavaScript এ কনভার্ট করে, যা শেষে React Elements তৈরি করে এবং UI-তে প্রদর্শিত হয়।

React-এর components হল এর প্রধান ভিত্তি, এবং এগুলি হলো ব্লক বা টুকরা যা UI তৈরি করে। React-এ দুটি ধরনের কম্পোনেন্ট ব্যবহার করা হয়: Functional Components এবং Class Components। উভয় কম্পোনেন্টের উদ্দেশ্য একই — ইউজারের জন্য ইন্টারফেস তৈরি করা, কিন্তু এগুলোর মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে।

Functional Components

Functional Components হল সেই কম্পোনেন্টগুলি যা সাধারণ JavaScript functions এর মতো কাজ করে। এগুলোর ভিতরে শুধুমাত্র UI এর জন্য rendering logic থাকে এবং তারা props গ্রহণ করে। এটি stateless (স্টেটলেস) এবং no lifecycle methods (লাইফসাইকেল মেথড) ধারণ করে।

উদাহরণ

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

বিশেষত্ব

• Stateless: মূলত, Functional Components কোনো স্টেট (state) ধারণ করে না (যদিও React Hooks ব্যবহার করে স্টেট যোগ করা সম্ভব)।
• নির্বাচনযোগ্যতা: সহজ এবং কমপ্যাক্ট কোড লেখা যায়।
• React Hooks সমর্থন: React Hooks (যেমন useState, useEffect) ব্যবহারের মাধ্যমে Functional Components এখন স্টেট এবং লাইফসাইকেল মেথড ধারণ করতে পারে।

Class Components

Class Components হল সেই কম্পোনেন্টগুলি যা JavaScript classes এর মাধ্যমে তৈরি করা হয়। এগুলি সাধারণত stateful (স্টেটফুল) এবং lifecycle methods ধারণ করে, যা রেন্ডারিং এবং ইউজার ইন্টারঅ্যাকশন পরিচালনার জন্য গুরুত্বপূর্ণ।

উদাহরণ

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

বিশেষত্ব

• Stateful: Class Components এর মধ্যে state ধারণ করা যায়, যা কম্পোনেন্টের ভ্যালু বা তথ্য পরিবর্তন করতে সাহায্য করে।
• Lifecycle methods: Class Components-এ বিভিন্ন lifecycle methods থাকে যেমন componentDidMount(), shouldComponentUpdate(), ইত্যাদি, যা কম্পোনেন্টের বিভিন্ন স্টেট পরিবর্তন বা আপডেট করার সময় ব্যবহৃত হয়।
• বড় ও জটিল কোড: Class Components সাধারণত একটু বড় হয় এবং কোডের পুনঃব্যবহার কিছুটা কঠিন হতে পারে।

Functional vs Class Components: পার্থক্য

React Hooks - Functional Components এ State এবং Lifecycle Methods

React 16.8 এর পর, React-এ Hooks এর ব্যবহার শুরু হয়, যা Functional Components-এ স্টেট এবং লাইফসাইকেল মেথড ব্যবহারের সুযোগ দেয়। এর মাধ্যমে Functional Components অনেক বেশি ক্ষমতাশালী হয়ে উঠেছে।

useState Hook (স্টেট ব্যবস্থাপনা)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect Hook (লাইফসাইকেল ব্যবস্থাপনা)

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    
    return () => clearInterval(timer); // Clean up the interval
  }, []);

  return <p>Time elapsed: {seconds}s</p>;
}

সারাংশ

• Functional Components হল সহজ, ছোট এবং ক্লিন কোড তৈরির জন্য ব্যবহৃত হয়। React Hooks এর মাধ্যমে এগুলি এখন স্টেট এবং লাইফসাইকেল মেথডও পরিচালনা করতে পারে।
• Class Components বেশ বড় এবং জটিল হতে পারে, তবে এগুলি স্টেট এবং লাইফসাইকেল মেথড ধারণ করে যা অনেক ক্ষেত্রে দরকার হতে পারে।

আজকাল, React Hooks এর কারণে Functional Components বেশিরভাগ সময় ব্যবহৃত হচ্ছে, কারণ এগুলি ছোট এবং সহজে ব্যবহৃত হতে পারে।

React এ Props এবং State দুটি গুরুত্বপূর্ণ কনসেপ্ট, যা আপনাকে কম্পোনেন্টগুলির মধ্যে ডেটা স্থানান্তর এবং ব্যবস্থাপনা করতে সহায়ক হয়। এই দুটি কনসেপ্টের মাধ্যমে আপনি React অ্যাপ্লিকেশনকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারেন।

Props (Properties)

Props হল প্রপার্টি বা ডেটা যা একটি কম্পোনেন্টের মাধ্যমে অন্য কম্পোনেন্টে পাস করা হয়। এটা একটি ইনপুট হিসেবে কাজ করে যা প্যারেন্ট কম্পোনেন্ট (পিতামাতা) তার চাইল্ড কম্পোনেন্টে (সন্তান) পাস করে। Props একবার পাস করা হলে, চাইল্ড কম্পোনেন্টে তাদের পরিবর্তন করা সম্ভব নয়। এটি read-only বা immutable ডেটা হিসেবে কাজ করে।

Props এর ব্যবহার:

• Props ব্যবহার করে ডেটা বা ইনফরমেশন এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাস করা হয়।
• Props-এর মাধ্যমে একটি কম্পোনেন্ট কনফিগার বা কাস্টমাইজ করা যায়।
• Props ব্যবহৃত হয় UI এর বিভিন্ন অংশকে একে অপরের সাথে সমন্বয় করার জন্য।
• Props সাধারণত রেন্ডার ফাংশনের ভিতরে ব্যবহার করা হয়।

Props এর উদাহরণ:

import React from 'react';

// Child component
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Parent component
function App() {
  return <Welcome name="Azizur" />;
}

export default App;

এখানে, App কম্পোনেন্ট থেকে Welcome কম্পোনেন্টে name প্রপস পাস করা হয়েছে। Welcome কম্পোনেন্ট এই name প্রপসকে ব্যবহার করে "Hello, Azizur!" প্রদর্শন করবে।

State

State হল ডাইনামিক ডেটা বা মিউটেবল (mutable) ডেটা যা একটি কম্পোনেন্টের ভিতরে রাখা হয় এবং সেটি সময়ের সাথে পরিবর্তিত হতে পারে। যখন স্টেট পরিবর্তিত হয়, তখন কম্পোনেন্টের UI পুনরায় রেন্ডার হয়। State ব্যবহারের মাধ্যমে আপনি ইনপুট ফর্মের মান, ক্লিকের সংখ্যা, টাইমার এর মান, ইত্যাদি ট্র্যাক করতে পারেন।

State এর ব্যবহার:

• State কম্পোনেন্টের ডাইনামিক ডেটা সংরক্ষণ করার জন্য ব্যবহৃত হয়।
• State পরিবর্তন করলে কম্পোনেন্টের UI পুনরায় রেন্ডার হয়।
• State কে সাধারণত useState হুক বা class components-এ this.state এবং this.setState() এর মাধ্যমে ব্যবহৃত হয়।

State এর উদাহরণ (Functional Component):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

export default Counter;

এখানে, useState হুক ব্যবহার করে একটি count নামক স্টেট তৈরি করা হয়েছে। increment ফাংশন কল করলে count বৃদ্ধি পায় এবং UI তে তা রিফ্লেক্ট হয়।

State এর উদাহরণ (Class Component):

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

export default Counter;

এখানে, state this.state এর মাধ্যমে ব্যবহৃত হয়েছে এবং setState মেথডের মাধ্যমে স্টেট পরিবর্তন করা হয়েছে।

Props এবং State এর মধ্যে পার্থক্য

সারাংশ

• Props হল ইনপুট যা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয় এবং এটি পরিবর্তনযোগ্য নয়।
• State হল ডাইনামিক ডেটা যা একটি কম্পোনেন্টের ভিতরে থাকে এবং এটি পরিবর্তনযোগ্য, ফলে UI রেন্ডার পরিবর্তিত হয়।

এগুলি React অ্যাপ্লিকেশন তৈরি করার জন্য খুবই গুরুত্বপূর্ণ কনসেপ্ট, কারণ এই দুটি কনসেপ্টের মাধ্যমে ডেটা ব্যবস্থাপনা এবং কম্পোনেন্টের মধ্যে তথ্য প্রবাহ নিয়ন্ত্রণ করা হয়।

React একটি খুবই জনপ্রিয় লাইব্রেরি যা আপনাকে UI তৈরি করতে সাহায্য করে, এবং এটি Component-based architecture ব্যবহার করে। React-এ অ্যাপ্লিকেশন বা কম্পোনেন্টের বিভিন্ন জীবনচক্র (lifecycle) থাকে, এবং সেই জীবনের বিভিন্ন ধাপগুলোর জন্য আমরা Lifecycle Methods এবং Hooks ব্যবহার করি।

নিচে React Lifecycle Methods এবং Hooks-এর বিস্তারিত ব্যাখ্যা দেওয়া হলো:

React Lifecycle Methods

React কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে কার্যকরী হতে পারে, এবং এর জন্য React কিছু Lifecycle Methods প্রদান করে। Class-based Components ব্যবহার করলে, আপনি এই মেথডগুলি ব্যবহার করতে পারবেন।

১. componentDidMount()

• বিবরণ: এটি কম্পোনেন্টটির প্রথমবার DOM-এ রেন্ডার হওয়ার পরে কল হয়। এটি সাধারণত API কল করার জন্য বা অন্য কোনো একটি ইনিশিয়ালাইজেশন কাজের জন্য ব্যবহৃত হয়।
• ব্যবহার: ডেটা লোডিং বা সাবস্ক্রিপশন সেটআপ করতে।

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component has mounted");
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

২. componentDidUpdate(prevProps, prevState)

• বিবরণ: এই মেথডটি তখন কল হয় যখন কম্পোনেন্টটির প্রপস বা স্টেট আপডেট হয়। এটি আগের প্রপস বা স্টেটের সাথে বর্তমান প্রপস বা স্টেট তুলনা করতে ব্যবহৃত হয়।
• ব্যবহার: ডেটা পরিবর্তনের পর অন্য কোনো কাজ (যেমন DOM আপডেট) করতে।

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      console.log("Value has changed");
    }
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

৩. componentWillUnmount()

• বিবরণ: এটি কম্পোনেন্টটি DOM থেকে আনমাউন্ট হওয়ার আগে কল হয়। এটি সাধারণত ক্লিনআপের জন্য ব্যবহৃত হয়, যেমন সাবস্ক্রিপশন রিমুভ করা বা টাইমার বন্ধ করা।
• ব্যবহার: API কল বন্ধ করতে বা ইভেন্ট লিসেনার সরাতে।

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log("Component is being unmounted");
  }

  render() {
    return <div>Goodbye, World!</div>;
  }
}

৪. shouldComponentUpdate(nextProps, nextState)

• বিবরণ: এটি একটি boolean মান রিটার্ন করে এবং React-কে বলে যে কম্পোনেন্টটি পুনরায় রেন্ডার হওয়া উচিত কি না। এটি performance optimization এর জন্য ব্যবহার করা হয়।
• ব্যবহার: যদি আপনি চান যে কিছু পরিস্থিতিতে রেন্ডারিং বন্ধ হোক।

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

React Hooks

React 16.8-এ Hooks চালু হয়েছিল। Hooks মূলত ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফসাইকেল ফিচার যোগ করতে ব্যবহৃত হয়, যা আগে কেবল ক্লাস কম্পোনেন্টে পাওয়া যেত।

১. useState()

• বিবরণ: এটি একটি ফাংশনাল কম্পোনেন্টে স্টেট সংরক্ষণের জন্য ব্যবহৃত হয়।
• ব্যবহার: স্টেট পরিবর্তন এবং তার মান আপডেট করার জন্য।

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

২. useEffect()

• বিবরণ: এটি কম্পোনেন্টের lifecycle methods এর সমতুল্য, যেমন componentDidMount, componentDidUpdate, এবং componentWillUnmount। এটি সাইড এফেক্ট (যেমন API কল, সাবস্ক্রিপশন) পরিচালনা করতে ব্যবহৃত হয়।
• ব্যবহার: সাইড এফেক্টের জন্য, যেমন ডেটা ফেচিং বা সাবস্ক্রাইব করা।

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means it runs only once, similar to componentDidMount

  return <div>{data ? data.name : 'Loading...'}</div>;
}

৩. useContext()

• বিবরণ: এটি একটি হুক যা একটি React Context থেকে মান গ্রহণ করতে ব্যবহৃত হয়।
• ব্যবহার: গ্লোবাল স্টেট পরিচালনা বা থিম সেটিংস শেয়ার করতে।

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function MyComponent() {
  const theme = useContext(ThemeContext);

  return <div className={theme}>Hello, World!</div>;
}

৪. useRef()

• বিবরণ: এটি একটি রেফারেন্স তৈরি করে, যা DOM নোড বা কম্পোনেন্টে সরাসরি অ্যাক্সেসের জন্য ব্যবহৃত হয়। এটি স্টেটের মতো রেন্ডারিং ট্রিগার করে না।
• ব্যবহার: DOM নোডে সরাসরি অ্যাক্সেস পেতে বা স্টোর করা মান ধরে রাখতে।

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

৫. useReducer()

• বিবরণ: এটি জটিল স্টেট লজিকের জন্য ব্যবহৃত হয়, যেখানে স্টেট আপডেট করার জন্য একটি ডিসপ্যাচ ফাংশন ব্যবহৃত হয়। এটি useState এর বিকল্প হিসেবে কাজ করতে পারে।
• ব্যবহার: বৃহত্তর অ্যাপ্লিকেশন বা জটিল স্টেট লজিকের জন্য।

import React, { useReducer } from 'react';

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

সারাংশ

• React Lifecycle Methods ক্লাস-ভিত্তিক কম্পোনেন্টে ব্যবহৃত হয় এবং কম্পোনেন্টের জীবনের বিভিন্ন ধাপে কার্যকরী হয় (যেমন componentDidMount, componentDidUpdate, ইত্যাদি)।
• React Hooks ফাংশনাল কম্পোনেন্টে ব্যবহৃত হয় এবং React এর লাইফসাইকেল এবং স্টেট ম্যানেজমেন্টের জন্য একটি আধুনিক বিকল্প। এটি useState, useEffect, useRef, useReducer, এবং আরও অনেক হুক প্রদান করে।

React Hooks আপনাকে ফাংশনাল কম্পোনেন্টের মাধ্যমে লাইফসাইকেল এবং স্টেট পরিচালনা করতে সক্ষম করে, যা কম্পোনেন্টের মধ্যে ক্লাস ব্যবহারের প্রয়োজনীয়তা হ্রাস করে।